<template>
  <MainFrame>
    <div slot='content'>
      <div class="top-title">
        换相器列表
      </div>
      <div class="page">
        <div class="top" style="margin-bottom: 10px">
          <!-- <el-button type="primary" @click="add" icon="el-icon-plus" v-if="userRole!=2">增加换相器</el-button> -->
          <el-button type="primary" @click="back" icon="el-icon-back">返回</el-button>
          <el-row type="flex">
            <el-col :span="3">归属地：{{ location }}</el-col>
            <el-col :span="3">台区号：{{ areaNo }}</el-col>
          </el-row>
        </div>
        <el-table :data="items" border style="width: 100%" stripe :default-sort="{prop: 'machineNo'}">
          <el-table-column prop="machineNo" label="换相器号" width="100">
          </el-table-column>
          <el-table-column prop="track" label="支路" width="100">
            <template slot-scope="scope">
              <!-- <el-radio-group v-if="userRole!=2" v-model="scope.row.track" @change="updateMachine(scope.row)">
                <el-radio :label="1">1支路</el-radio>
                <el-radio :label="2">2支路</el-radio>
              </el-radio-group> -->
              <span>{{scope.row.track==1?"1支路":"2支路"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="activeStatus" label="激活状态" width="100">
            <template slot-scope="scope">
              {{scope.row.activeStatus==1?"已激活":"未激活"}}
            </template>
          </el-table-column>
          <el-table-column prop="iLimit" label="电流限值" width="100">
            <template slot-scope="scope">
              {{scope.row.iLimit == null ? 0 : scope.row.iLimit}}A
            </template>
          </el-table-column>
          <el-table-column prop="installAddress" label="安装地点" min-width="200">
          </el-table-column>
          <el-table-column width="180" v-if="userRole!=2">
            <template slot-scope="scope">
              <el-button size="mini" round @click="activeMachine(scope.row)">
                {{scope.row.activeStatus==1?"禁用":"激活"}}
              </el-button>
              <el-button size="mini" round @click="edit(scope.row)">编辑</el-button>
              <!-- <el-button size="mini" round type="danger" @click="del(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      userRole: null,
      items: [],
      areaId: null,
      location: '',
      areaNo: ''
    };
  },
  mounted: function() {
    this.userRole = sessionStorage.getItem("role");
    this.areaId = this.$route.query.id;
    this.getItems();
  },
  created: function() {
    // this.userRole = sessionStorage.getItem("role");
    // this.areaId = this.$route.query.id;
    // this.getItems();
  },
  methods: {
    getItems() {
      var self = this;
      var url = '/yitai/admin/machine';
      var params = { areaId: this.areaId };
      var success = function(response) {
        self.items = response.info;
        self.location = response.info[0].location;
        self.areaNo = response.info[0].areaNo;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    add() {
      this.$router.push({ name: 'MachineInfo', query: { areaId: this.areaId } })
    },
    realtimeData(item) {
      this.$router.push({ name: 'MachineData', query: { id: item.id } })
    },
    edit(item) {
      this.$router.push({ name: 'MachineInfo', query: { id: item.id, areaId: this.areaId } })
    },
    del(item) {
      var self = this;
      var event = function() {
        var params = { id: item.id }
        var url = '/yitai/admin/deleteMachine';
        var success = function(response) {
          self.getItems()
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event)
    },
    onClickCmd(item) {
      this.$prompt('请输入指令' + item.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    activeMachine(item) {
      var self = this;
      var url = '/yitai/admin/activeMachine';
      var params = { id: item.id };
      var success = function(response) {
        self.$message({message:'修改成功！'});
        self.getItems();
      }
      var fail = function() {};
      var complete = function() {};
      utils.requestLoading(url, params, success, fail, complete);
    },
    updateMachine(item) {
      var self = this;
      var url = '/yitai/admin/updateMachine';
      var params = {
        id: item.id,
        machineNo: item.machineNo,
        track: item.track
      };
      var success = function(response) {
        self.$message({message:'更新成功！'});
      }
      var fail = function() {
      };
      var complete = function() {
        self.getItems();
      };
      utils.requestLoading(url, params, success, fail, complete);
    },
    back() {
      // window.history.back();
      this.$router.go(-1)
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
}

.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
  .page-content {}
}

</style>
